<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员信息表</title>
</head>
<body>
<div class="header" style="background: #2488a9;padding: 60px 0 60px 0;text-align: center">
    <h1>学员信息网</h1>
    <a href="" style="color: #d6d6d6;text-decoration: none">1803</a>
</div>
    <h2>添加</h2>
<div class="" style="text-align: center">
    <input type="text" id="n" placeholder="姓名" style="padding: 10px 20px 10px 20px">
    <select id="s"  style="padding: 10px 90px 10px 90px;">
        <option value="男" >男</option>
        <option value="女">女</option>
    </select>
    <input type="number" id="a" placeholder="年龄"  style="padding: 10px 20px 10px 20px">
    <button type="button" class="btn btn-primary" style="padding: 10px 90px 10px 90px">添加</button>
</div>


    <h2>列表</h2>
<div style="text-align: center;border-bottom:1px solid #ccc;">
    <a style="padding: 10px 180px 10px 180px">姓名</a>
    <a style="padding: 10px 180px 10px 180px">性别</a>
    <a style="padding: 10px 180px 10px 180px">年龄</a>
</div>
    <ul id="list"></ul>


<script>

    document.querySelector("#btn").addEventListener("click", function () {
        var n = document.querySelector("#n").value;
        console.log(n);

        var s = document.querySelector("#s").value;
        console.log(s);

        var a = document.querySelector("#a").value;
        console.log(a);


        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                console.log(xmlhttp.responseText);
            }
        }
        xmlhttp.open("GET", "http://localhost/student", true);
        xmlhttp.send();
    })
    function loadXmlDoc(){
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                console.log(xmlhttp.responseText);
                console.log(json.data);
            }
            for(let i = 0;i<json.data.length;i++){
                var li = document.createElement("span");

                var spanName = document.createElement("span");
                spanName.innerHTML = json.data[i].studentName;

                var spanSex = document.createElement("span");
                spanSex.innerHTML = json.data[i].Sex;

                var spanAge = document.createElement("span");
                spanAge.innerHTML = json.data[i].age;

                li.appendChild(spanName);
                li.appendChild(spanSex);
                li.appendChild(spanAge);

                document.querySelector("#list").appendChild(li);
            }
        }
    }
    xmlhttp.open("GET","http://localhost/student",true);
    xmlhttp.send();
</script>
</body>
</html>



